*{
    --themecolor: #3a3a3a;
    --maincolor: #409EFF;
    --bordercolor: #e6e6e6;
    --textcolor: #3a3a3a;
    --graycolor: #999999;
    --redcolor: rgb(255, 73, 73);
}
/*.main-container{
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.app-main{
  position: absolute;
  height: 100%;
}*/
/*#app {
    width: 100%;height: 100%;
    position: fixed;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: var(--textcolor);
    overflow: hidden;
    margin: 0;
    border: none;
    font-size: 14px;
}*/
.w100{width: 100%;}
.w80{width: 80%;}
.h100{height: 100%;}
.w250{width: 250px;}
.wh100{width: 100%;height: 100%;}

.m0{margin: 0;}
.p0{padding: 0;}
.m2{margin: 2px;}
.m5{margin: 5px;}
.m10{margin: 10px;}
.mt5{margin-top: 5px;}
.mt10{margin-top: 10px;}
.mt20{margin-top: 20px;}
.mb5{margin-bottom: 5px;}
.mb0{margin-bottom: 0!important;}
.mb10{margin-bottom: 10px;}
.mb20{margin-bottom: 20px;}
.ml5{margin-left: 5px;}
.ml10{margin-left: 10px;}
.ml20{margin-left: 20px;}
.mr5{margin-right: 5px;}
.mr10{margin-right: 10px;}
.mr20{margin-right: 20px;}
.p5{padding: 5px;}
.p10{padding: 10px;}
.p20{padding: 20px;}
.p40{padding: 40px;}
.pr10{padding-right: 10px;}
.pr20{padding-right: 20px;}
.pl0{padding-left: 0;}
.pl10{padding-left: 10px;}
.pl20{padding-left: 20px;}
.pt10{padding-top: 10px;}
.pt20{padding-top: 20px;}
.pb10{padding-bottom: 10px;}
.pb20{padding-bottom: 20px;}

.solid{border: 1px solid var(--bordercolor);}
.dash{border: 1px dashed var(--bordercolor);}
.dot-dash{border: 1px dot-dash var(--bordercolor);}
.solid-top{border-top: 1px solid var(--bordercolor);}
.solid-bottom{border-bottom: 1px solid var(--bordercolor);}
.solid-left{border-left: 1px solid var(--bordercolor);}
.solid-right{border-right: 1px solid var(--bordercolor);}
.no-border{border: none;}

.bold{font-weight: bold;}
.round {border-radius: 5000px;}
.radius {border-radius: 6px;}
.shadow{box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
.no-shadow{box-shadow: none;}

.of-hide{overflow: hidden;}
.ofx-auto{overflow-x: auto;}
.ofx-hide{overflow-x: hidden;}
.of-auto{overflow: auto;}
.ofy-auto{overflow-y: auto;}
.ofy-hide{overflow-y: hidden;}

.text-auto{
    text-overflow: ellipsis;overflow: hidden;word-break: keep-all;white-space: nowrap;
}
.underline{text-decoration: underline;}
.no-select{
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.inline{display: inline;}
.inline-block{display: inline-block;}
.inline-flex{display: inline-flex;}
.block{display: block;}
.center{text-align: center;}
.left{text-align: left;}
.right{text-align: right;}
.md{vertical-align: middle;}
.point{cursor: pointer!important;}
.move{cursor: move;}
///*滚动条*/
//::-webkit-scrollbar{
//    width: 7px;
//    height: 7px;
//    background-color: #F5F5F5;
//}
//::-webkit-scrollbar-track {
//    box-shadow: inset 0 0 6px white;
//    -webkit-box-shadow: inset 0 0 6px white;
//    border-radius: 10px;
//    background-color: #F5F5F5;
//}
//::-webkit-scrollbar-thumb{
//    border-radius: 10px;
//    box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
//    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
//    background-color: lightgrey;
//}

.iconfont{font-size: inherit;display: inline-block}
.el-button--mini.iconfont{
  font-size: 12px;
}
.el-menu-item .iconfont{
  line-height: 1;
}
[class*=" bg-"], [class^=bg-], .bg{
    color: white;
}
.bg{background-color: var(--maincolor);}
.main-color{color: var(--maincolor);}
.bg-black{background-color: var(--themecolor);}
.bg-while{background-color: white;color: var(--textcolor);}
.bg-gray{background-color: #efefef;color: inherit;}
.bg-light-gray{background-color: #f5f7fa;color: inherit;}
.gray{color: var(--graycolor)}
.black{color: var(--textcolor)}
.white{color: white}
.blue{color:mediumblue}
.pink{color:hotpink}
.red{color:var(--redcolor);}
.bg-red{background-color:var(--redcolor);}

.flex-row{
    display: flex;flex-direction: row;
  .flex-line{
    flex-flow: row wrap;align-content: flex-start;
  }
}
.flex-col{
    display: flex;flex-direction: column;
}

.font-12{font-size: 12px;}
.font-13{font-size: 13px;}
.font-14{font-size: 14px;}
.font-16{font-size: 16px;}
.font-18{font-size: 18px;}
.font-20{font-size: 20px;}

.fl{float: left;}
.fr{float: right;}


/*header*/
.logo *{
    display: inline-block;
}
.logo{
    display: inline-block;
    line-height: 60px;
    font-weight: 500;
    font-size: 22px;
    font-family: 'pingfang SC','helvetica neue',arial,'hiragino sans gb','microsoft yahei ui','microsoft yahei',simsun,sans-serif;
}
.folder.logo{
    width: 60px;
}
/*.top-menu{
    color: white;
}
.top-menu .el-menu-item.is-active{
    color: white;
}

.top-menu>.el-menu-item:not(.is-disabled):focus, .top-menu>.el-menu-item:not(.is-disabled):hover, .top-menu>.el-submenu .el-submenu__title:hover {
    background-color: #444;
}
.top-menu .el-menu-item:not(.is-disabled):focus, .top-menu .el-menu-item:not(.is-disabled):hover {
    color: white;
}*/

.lo-img{
  background: url("../image/logo-w.png") no-repeat;
}
.lo-img.login-logo{
    width: 40px;height: 40px;margin: 10px 10px 10px -40px;
    background-size:cover;
    vertical-align: middle;
}
i.lg{
    font-size: 20px;
}
.tree-icon{
    background-size: cover;
    background-position: center;
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
    line-height: 1;
    font-size: inherit;
    width: 16px;
    height: 16px;
}
.icon-wechat{color: green;font-size: 18px;}
.icon-pdf{color: rgb(255, 120, 117);}
.icon-txt{color: gray;}
.icon-zip{color: rgb(224,64,106);}
.icon-jpg{color: rgb(239, 203, 53);}
.icon-xls{color: rgb(115, 209, 61);}
.icon-doc{color: rgb(24, 144, 255);}
.icon-ppt{color: rgb(255, 122, 69);}
.icon-file{color: rgb(255, 202, 40);}

.tree-icon-role{
    background-image: url("../image/role2.png");
}
.tree-icon-dept{
    background-image: url("../image/house5.png");
}
.tree-icon-user{
    background-image: url("../image/user3.png");
}
.icon-help{
  font-size: 16px;cursor: pointer;margin: auto 5px;color: var(--maincolor);
}
.tip {
    padding: 8px 16px;
    background-color: #ecf8ff;
    border-radius: 4px;
    border-left: 5px solid var(--maincolor);
    margin: 20px 0;
}


.el-dialog__body{
  padding: 5px 10px;
}
.el-tree > .el-tree-node {
  min-width: 100%;
  display: inline-block;
}
.el-dialog__footer{
  padding: 5px 20px 20px 20px;
}

pre{
  line-height: 20px;color: var(--textcolor);
}

.fix-btn{
  display: flex;
  position: fixed;
  width: 40px;
  height: 40px;
  right: 40px;
  text-align: center;
  border-radius: 50%;
  background-color: white;
  justify-content: center;
  align-items: center;
  color: var(--maincolor);
  z-index: 5;
  bottom: 100px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  i{
    font-size: 20px;
  }
  &:hover{
    background-color: var(--maincolor);
    color: white;
  }
}
.ms-parent{
  display: flex;
  justify-content: center;
  align-items: center;
}
